<%@ page pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="isperp" uri="/WEB-INF/tlds/isperp.tld"%>

<form:form commandName="model" cssClass="validate"
	action="individuation/category/property/save">
	<form:hidden path="categoryId" /> 
	<table class=" form-table">
		<tbody>
			<tr>
				<td class="td1">ID(必须唯一)：</td>
				<td class="td2"><form:input path="id" cssClass="required" />
				</td>
			</tr>
			<tr>
				<td class="td1">名称：</td>
				<td class="td2"><form:input path="name" cssClass="required" />
				</td>
			</tr>
			<tr>
				<td class="td1">控件类型：</td>
				<td class="td2"><form:select path="dataType">
						<form:option value="string">字符串</form:option>
						<form:option value="number">数字</form:option>
						<form:option value="date">日期</form:option>
						<form:option value="datetime">时间</form:option>
						<form:option value="textarea">文本框</form:option>
						<form:option value="select">下拉选择框</form:option>
						<form:option value="checkboxs">复选框</form:option>
						<form:option value="radios">单选框</form:option>
						<form:option value="list">列表</form:option>
						<form:option value="custom">自定义控件</form:option>
					</form:select></td>
			</tr>
			<tr id="trDatasource" style="display:none">
				<td class="td1">数据源:</td>
				<td class="td2" colspan="3"><form:textarea
						cssStyle="height:150px;font-size:16px;" path="items" id="txtDatasource"
						placeholder="下拉、复选、单选请用如[{name:'老师',value:'1'},{name:'学生',value:'2'}]，自定义请用自定义html代码" />
				</td>
			</tr>
			<tr style="display:none">
				<td class="td1">所在TD样式代码：</td>
				<td class="td2"><form:textarea path="tdInnerHtml" /></td>
			</tr>
			<%-- 			<tr>
				<td class="td1">控件样式代码：</td>
				<td class="td2"><form:textarea path="controllerInnerHtml" /></td>
			</tr> --%>
			 <tr style="display:none">
				<td class="td1">所属类别：</td>
				<td class="td2"><form:input path="classify" value="主要信息"/>
					<div id="classifyChoseDiv" style='display:inline-block;'></div>
				</td>
			</tr> 
			<tr>
				<td class="td1">默认值：</td>
				<td class="td2"><form:input path="defaultValue" /></td>
			</tr>
			<tr id="trRegex">
				<td class="td1">验证正则式：</td>
				<td class="td2"><form:input path="regex" /></td>
			</tr>
			<tr>
				<td class="td1">必填项：</td>
				<td class="td2"><form:checkbox path="notnull" />
				</td>
			</tr>
			<tr>
			<tr>
				<td class="td1">排序：</td>
				<td class="td2"><form:input path="orderNum" cssClass="number" />
				</td>
			</tr>
		</tbody>
	</table>

</form:form>
<isperp:buttonList>
	<button class="submit" onclick="isperp.submitForm();return false;">
		<span class="icon icon-save"></span>提交
	</button>
</isperp:buttonList>

<script type="text/javascript">
	function dataTypeChange() {
		var val = $("#dataType").val();
		if (val == "select" || val == "checkboxs" || val == "radios" || val == "custom" || val == "list") {
			$("#trDatasource").show();
			if (val == "list" && $("#txtDatasource").val()=="")
				$("#txtDatasource").val("{tableName:'list_cpwx20p',columns:[ {label : '维修器件',name : 'repair_period',width : '30%',dtype : 'string',ifsum : false}, {label : '维修器件到货日期',name : 'repair_ardate',width : '40%',dtype : 'date',ifsum : false}]}");
		} else {
			$("#trDatasource").hide();
		}
		if (val != "string") {
			$("#trRegex").hide();
		} else {
			$("#trRegex").show();
		}
	}

	dataTypeChange();
	$("#dataType").change(function() {
		dataTypeChange();

	});
	$(function() {
		if ($("#name").val() == "") {
			var categoryId = '${categoryId}';
			$.ajax({
				url : 'individuation/category/property/getCategoryInfo?categoryId=' + categoryId,
				success : function(data) {
					if (data) {
						var html = "";
						$("#orderNum").val(data.maxNum);
						var d = data.classifyList;
						for ( var i = 0; i < d.length; i++) {
							html += "<a style='margin-left:5px;' href='javascript:void(0)' onclick=\"copyInfo('" + d[i].classify + "')\">" + d[i].classify + "</a>";
						}
						$("#classifyChoseDiv").append(html);

					}
				}
			});
		}

	});

	function copyInfo(type) {
		$("#classify").val(type);
	}
</script>
